
<!DOCTYPE html public>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <link href="css/styleSlidersGame.css" rel="stylesheet" type="text/css" ></img>
    <link href="css/styleGame.css" rel="stylesheet" type="text/css"></img>
    <link rel="shortcut icon" type="image/jpg" href="./favicon.jpg">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js">
    </script>

    
    <title>Microsimulation of Traffic Flow: Onramp</title> 
</head>


<body>
  

<!-- ############################################## -->
<!-- header: title image loaded as background image via css -->
<!-- ############################################## -->

<div id="header"> 
<!--  <img class="title" src="figs/title.png"  width="100%"></img> -->
</div> 


<!-- ############################################## -->
<!-- Buttons                                        -->
<!-- ############################################## -->


  <button onclick='clearHighscores_rampMeteringGame();'>
  Clear Highscores ramp-metering game</button> 

  <button onclick='clearHighscores_routingGame();'>
  Clear Highscores routing game</button> 




<!-- redirects to other scenarios, defines myRedirectX -->

<script src="js/redirect.js" type="text/javascript"></script>

<!-- ############################################## -->
<!-- the actual simulation canvas -->
<!-- ############################################## -->



<!-- ############################################## -->
<!-- Info text including display of results  (filled by showInfo()) 
<!-- ############################################## -->

  <div id="infotextRampMeteringGame"> </div>





<!-- ################################################# -->
<!-- No main sliders to control the game: only traffic lights/speed limits -->
<!-- ################################################# -->




<!-- ############################################## -->
<!-- info-text inside sliders-div (filled by showInfo())
<!-- ############################################## -->

<br>
<div id="infotext"></div>
  <div id="infotextRoutingGame"> </div>

</center>
</div>   <!-- id="sliders">-->




<!-- ########################################################## -->
<!-- specific scripts; position below any simulation elements ! -->
<!-- ########################################################## -->

<script src="js/seedrandom.min.js"></script> <!-- random w seed debug -->

<script src="js/timeView.js" type="text/javascript"></script>
<script src="js/media.js" type="text/javascript"></script>

<script src="js/control_gui.js"></script> 
<script src="js/canvas_gui.js"></script> 
<script src="js/TrafficObjects.js"></script> 
<script src="js/TrafficLightControlEditor.js"></script> 
<script src="js/colormanip.js"></script>

<script src="js/models.js"></script> 
<script src="js/vehicle.js"></script>

<script src="js/paths.js"></script>
<script src="js/road.js"></script>
<script src="js/stationaryDetector.js"></script> 
<script src="js/rampMeteringGameInfo.js"></script> 
<script src="js/routingGameInfo.js"></script> 

<!-- PROJ--> <script src="js/rampMeteringGame.js"></script>
<!-- cannot load the second project because double def leads to 
<!-- syntax errorstopping further loading-->

<script>
  function clearHighscores_routingGame(){
  deleteHighscores("routingGame_Highscores");
  time=10000;
  nick="The Worst Controller"
  finishRoutingGame("infotextRoutingGame");
  }
function finishRoutingGame(infotextID){
    isGame=false;
    qIn=qInInit;
    var roundedTime=parseFloat(time).toFixed(1);
    var messageText=updateHighscores(nick,roundedTime,
				     "routingGame_Highscores");
    document.getElementById(infotextID).innerHTML=messageText;
    console.log("Game finished in ",time," seconds!");
    myStartStopFunction(); // reset game
}
  
</script>


</body>
</html>
